<template>
  <div>
    <el-breadcrumb separator="/" class="submenu">
      <el-breadcrumb-item class="submenu-left" :to="{ path: '/Index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">在线用户</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-table">
        <el-button @click="compelTakeOff()" type="primary" icon="el-icon-remove-outline" style="margin-bottom:20px">强制下线</el-button>
        <el-button @click="allBorod()" type="success" icon="el-icon-phone-outline" style="margin-bottom:20px">全员广播</el-button>
        <el-button @click="refleshUser()" type="info" icon="el-icon-refresh" style="margin-bottom:20px">刷新</el-button>
      <el-table :data="tableData4" style="width: 100%" max-height="250"  @selection-change="handleSelectionChange" :default-sort="{prop: 'vendorCode',prop: 'process.registTime', order: 'descending'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column v-if='isShow' prop="id"></el-table-column>
        <el-table-column prop="name" label="全称" sortable width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
        <el-table-column prop="organization.vendorName" label="供应商名称" width="120"></el-table-column>
        <el-table-column prop="company.companyName" label="公司名称" width="120"></el-table-column>
        <el-table-column prop="ip" label="登录IP" width="120"></el-table-column>
      </el-table>
      <page></page>

       <el-dialog title="全员广播" :visible.sync="dialoglockVisible">
        <el-form :model="form">
          <el-input v-if='isShow' v-model="form.id"></el-input>
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.lockReason" >
            </el-input>
            <template>
          
              <el-radio v-model="checkEdUser"  label="0" @change="editChangeOne">发送一次</el-radio>
              <el-radio v-model="checkEdUser" label="1" @change="editChangeAll">发送多次</el-radio>
            </template>
              <template>
          <el-form-item label="发送次数" >
         <el-input-number v-model="num1" :min="0" :max="10" :disabled="isEdit" label="描述文字"></el-input-number>
          </el-form-item>
       
         <el-form-item label="间隔时间" >
         <el-input-number v-model="num2" :min="0" :disabled="isEdit" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
             
       
        </template>
        </el-form>
          
       
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialoglockVisible = false">取 消</el-button>
          <el-button type="primary" @click="save(form)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
   import Page from '@/components/page.vue'
   import axios from 'axios'
  export default {
     components:{
    Page
    },
    data() {
      return {
        isShow: false,
      dialoglockVisible : false,
        tableData4: [],
        multipleSelection: [],
        checkIds: [],
        num1: 0,
        num2: 0,
        formLabelWidth: '120px',
        isEdit :"false",
        checkEdUser : '0',
        form : {
       
        }
      };
    },
    mounted() {
      this.tableData4f();
    },
    methods: {
      tableData4f() {
         //初始化操作
        axios.get(this.lib.config.host.system+"/system/onlineusers/query", {})
          .then((response) => {
            this.tableData4 = response.data.rows;
          })
          .catch((error) => {
            console.log(error);
          });
      

      },
         //赋值所有选中用户
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      compelTakeOff(){
        //强制下线
        let checkRows = this.multipleSelection;
        checkRows.map(item => {
          this.checkIds.push(item.id);
        });
        axios.POST(this.lib.config.host.system+"/system/onlineusers/layout", this.checkIds)
          .then((response) => {
            this.tableData4 = response.data.rows;
          })
          .catch((error) => {
            console.log(error);
          });
      },
      allBorod(){
        //弹出新增窗口
        this.dialogTitle = "用户新增",
        this.form = {};
        this.dialoglockVisible = true;
      },
      save(form) {
        this.dialogFormVisible = false;
        axios.post(this.lib.config.host.system+"/system/usermgt/users/saveOrUpdate", form)
          .then((response) => {
            this.tableData4f()
          })
          .catch((error) => {
            console.log(error);
          });

      },
      refleshUser(){
       //刷新
      },
      editChangeOne(){
       

        this.isEdit=true;
        this.num1 = 0;
        this.num2 = 0;
      },
       editChangeAll(){
        this.isEdit=false;
        this.num1 = 0;
        this.num2 = 0;
      }
    }
  }

</script>
<style>


</style>
